import { Empty } from 'antd';
import dartEmpty from './img/empty_dark.png';
import empty from './img/empty.png';
import { useGetThemeData } from '#/theme/hook';

const emptyImg = {
  dark: dartEmpty,
  gre: dartEmpty,
  light: empty,
};

const PageEmpty = (props = {}) => {
  const { description = '暂无数据', image, imageStyle = {}, style = {}, className } = props;

  const themeData = useGetThemeData();
  const defaultImg = image || emptyImg[themeData.key];
  const color = themeData.key === 'light' ? 'var(--font-a60)' : 'var(--font-white)';

  return (
    <Empty
      image={defaultImg}
      imageStyle={{
        height: 80,
        margin: image ? '8px 0' : '8px -4px 8px 8px',
        ...imageStyle,
      }}
      style={style}
      description={<div style={{ color }}>{description ?? '暂无数据'}</div>}
      className={className}
    />
  );
};
export default PageEmpty;

export const tableLocale = {
  emptyText: (
    <PageEmpty style={{ padding: '80px 0', color: 'var(--font4)' }} description="暂无数据" />
  ),
};
